<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            position: absolute;/*开启box1的绝对定位*/
        }
    </style>
    <script>
        window.onload=function () {
            //当div移动时 鼠标也跟着移动
        var box1=document.getElementById("box1");
        document.onmousemove=function (event) {//绑定鼠标响应函数
            event=event||window.event;//浏览器兼容问题
            //chrome浏览器认为滚动条是body的，可以通过body.scrollTop来获取
            //火狐等浏览器认为滚动条是html的
            // var st=document.body.scrollTop; //body的滚动条的距离
            // // var st=document.documentElement.scrollTop;//html的滚动条的距离
            var st=document.body.scrollTop||document.documentElement.scrollTop;
            var sl=document.body.scrollLeft||document.documentElement.scrollLeft;
            // console.log(st);
            //获取到鼠标的坐标
            var xm=event.clientX;
            var ym=event.clientY;
            //设置div的偏移量
            box1.style.left=xm+sl+"px";
            box1.style.top=ym+st+"px";

        }
        }
    </script>
</head>
<body style="height: 1000px;width:1500px">
<script>
    /*clientX和clientY 用于获取鼠标当前的可见窗口的坐标的 div的偏移量是相对域整个页面的
    *pageX和pageY可以获取鼠标相对于当前页面的坐标 但是这2个属性在IE8中不支持
     *  chrome浏览器认为滚动条是body的，可以通过body.scrollTop来获取
     */
</script>
<div id="box1" ></div>
</body>
</html>